<!--模板html-->
<template>
  <div>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="warning" size="medium" plain  @click="toFormHandler">新增</el-button>    </div>
    <!-- 表格 -->
    <div class="tab_content">

  <el-table :data="baseUser" stripe border style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column prop="id" align="center" label="ID" width="40"></el-table-column>
      <el-table-column align="center"   prop="username"  label="用户名"  width="80"></el-table-column>
      <el-table-column prop="password" align="center" label="密码"  width="80"> </el-table-column>
    <el-table-column  prop="telephone" align="center"  label="电话" width="80">  </el-table-column>
     <el-table-column  prop="realname"  align="center" label="真实姓名"  width="80"> </el-table-column>
         <el-table-column  prop="gender" align="center"  label="性别"   width="80">  </el-table-column>
         <el-table-column  prop="birth" align="center"  sortable  label="生日"  width="90">  </el-table-column>
         <el-table-column  prop="email"  align="center" label="邮箱"  width="80">  </el-table-column>
         <el-table-column  prop="autograph" align="center" label="识别记录"   width="60">  </el-table-column>
         <el-table-column  prop="isFree" align="center"  label="isFree"   width="60">  </el-table-column>
         
         <el-table-column prop="createTime" width="80" label="创建时间">
        <template slot-scope="scope">
          {{scope.row.createTime | fmtDate}}
        </template>  
      </el-table-column>
         <el-table-column  prop="status" align="center"  label="状态"   width="80">  </el-table-column>
         <el-table-column  prop="userFace" align="center"  label="人脸识别"   width="200"> </el-table-column>
         <el-table-column  prop="idCard" align="center"  label="身份"  width="80"> </el-table-column>
         <el-table-column  prop="address" label="地址" align="center" width="80"></el-table-column>
         <el-table-column prop="nation" label="国家" align="center" width="80"></el-table-column>
         <el-table-column prop="registerTime" align="center" label="注册时间" width="80"></el-table-column>
         <el-table-column prop="introduce" align="center" label="介绍" width="80"></el-table-column>

<!-- //操作列 -->
  <el-table-column width="100" align="center" label="操作">
           <template slot-scope="scope">
                    <el-button-group>
                  <el-button type="primary" plain @click="editHandler(scope.row)" circle icon="el-icon-edit"></el-button>
                  <el-button type="primary" plain @click="deleteHandler(scope.row)" circle icon="el-icon-delete"></el-button>
              </el-button-group>
                    </template>
             </el-table-column>


      </el-table>
    </div>
  </div>
</template>
<!--脚本js-->
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
import { get, del } from '@/utils/request'
export default {
  // 定义变量，在模板中直接使用
  data() {
    return {
      baseUser:[],
      visible:false

    }

  },
  // 定义事件处理函数、方法
  methods:{
       // 删除数据
      //   deleteHandler(row){
      //       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   let url = "http://localhost:8888/baseUser/deleteById"
      //   del(url,{id:row.id}).then(resp =>{
      //     // 1. 提示
      //     this.$message({type:"success",message:resp.message});
      //     // 2. 刷新
      //     this.loadBaseUsers();
      //   })
                    //   deleteHandler(row){
                    //       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    //   confirmButtonText: '确定',
                    //   cancelButtonText: '取消',
                    //   type: 'warning'
                    // }).then(() => {
                    //   let url = "http://localhost:8888/baselog/deleteById"
                    //   del(url,{id:row.id}).then(resp =>{
                    //     // 1. 提示
                    //     this.$message({type:"success",message:resp.message});
                    //     // 2. 刷新
                    //     this.loadBaseLogs();
                    //   })
    deleteHandler(row){
      this.$confirm('永久删除数据，是否执行？','提示',{
        confirmButtonText:"Yes",
        cancelButtonText:'no',
        type:'warning'
      }).then(() => {
        let url = "http://localhost:8888/baseUser/deleteById"
        del(url,{id:row.id}).then(resp =>{
          this.$message({type:"success",message:resp.message});
          this.loadBaseUsers();
        })
      })
    },
     tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      
        // 修改数据
        editHandler(row){
      this.$router.push({ 
        path:"/xiaoke/baseUser_form" ,
        query:row
      })
    },
    // 查询所有的基本文件数据
    loadBaseUsers(){
      let url = "http://localhost:8888/baseUser/query"
      get(url).then(resp=>{
        // 获取数据之后做的事情
        this.baseUser = resp.data;
      })
    },
      // 跳转
    //     toFormHandler(){
    //   this.$router.push({ path:"/xiaoke/baseUser_form" })
    // }
            // toFormHandler(){
            //   this.$router.push({ path:"/xiaoxiao/baseLogForm" })
            // }
            toFormHandler(){
              this.$router.push({ path:"/xiaoke/baseUser_Form"})
            }
  },
  // 生命周期钩子函数
  created(){
    // this.basefiles
    this.loadBaseUsers()

  }
}
</script>


<!--样式html-->
<style lang="sass" scoped>

</style>
